<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>注册页面</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet1" type="text/css" href="css/fonts/style.css"/>
        <script type="text/javascript">
        	$(document).ready(function(){
	      		$("input[name=name]").blur(function(){
	      			
	      			if($("input[name=name]").val()==""){
	      				if($("#span").html()!=null){
	    					$("#span").remove();
	      				}
	      				$("input[name=name]").after("<span id='span' style='display:inline;color:red'><img src='img/叉.png' />昵称必须填写</span>");
					}else{ 
						$.ajax({
							type: "post",
							url: "registerServlet",
							async: true,
							data: $("input[name=name]").serialize(),
							success: function(data) {
								if(data == "fail") {
									if($("#span").html()!=null){
				    					$("#span").remove();
				      				}
									$("input[name=name]").after("<span id='span' style='display:inline'><img src='img/叉.png' />用户名已存在</span>");
								}else{
									if($("#span").html()!=null){
				    					$("#span").remove();
				      				}
									$("input[name=name]").after("<span id='span' style='display:inline'>可以注册的用户名</span>");
								}
								
							}
						});
					}
					
					
				})
				
				
        		$("button").click(function(){
        			if($("#password").html()!=null){
        				$("#password").remove();
        			}
        			if($("#email").html()!=null){
        				$("#email").remove();
        			}
        			if($("input[name=password]").val()==""){
        				$("input[name=password]").after("<span id='password' style='display:inline'><img src='img/叉.png' />必须设置密码</span>");
        				return;
        			}
    				if($("input[name=email]").val()==""){
    					$("input[name=email]").after("<span id='email' style='display:inline'><img src='img/叉.png' />必须填写邮箱</span>");
    					return;
    				}
    				if($("input[name=name]").val()!=""&&$("input[name=password]").val()!=null&&$("input[name=email]").val()!=null){
						$.ajax({
							type: "post",
							url: "registerServlet",
							async: true,
							data: $("form").serialize(),
							success: function(data) {
								if(data == "success") {
									alert("注册成功,即将跳转到登录界面");
									window.location.href="signIn.jsp";
								}
							}
						});
					}else{
						alert("请把内容补充完整");
					}
        		})
        	})
        
        </script>
    </head>
    <body>
    	<div class="form">
	    	<form>
				<p class="form-group">
				    <label for="exampleInputName">昵称</label>
				    <input name="name" type="text" class="form-control" placeholder="请设置用户名">
				</p>
				<p class="form-group">
				   	<label for="exampleInputPassword1">密码</label>
				    <input name="password" type="password" class="form-control" placeholder="请设置登录密码">
				</p>
				<p class="form-group">
				    <label for="exampleInputEmail">邮箱</label>
				    <input name="email" type="email" class="form-control" placeholder="可用于找回密码">
				</p>
				<p class="form-group">
				    <label for="exampleInputDate">生日</label>
				    <input name="birthday" type="date" class="form-control date-picker" placeholder="2017/3/20"/>
				    <!--<script src="js/datepicker.js" type="text/javascript" charset="utf-8"></script>-->
				</p>
				<!--<p class="form-group">
					<label>头像</label>
					<input type="file" name="file" />
				</p>-->
				
			</form>	
			<button class="btn btn-primary">提交</button>
		</div>
		<script type="text/javascript">
			$(".form").css({"width":"500px","margin":"auto"});
			$("input").css({"width":"300px","display":"inline"});
			$("label").css({"display":"inline"});
		</script>
 	</body>
</html>